<template>
  <div v-loading="loading" class="main-content-container">
    <!-- 病历模板 -->
    <div ref="search" style="padding-bottom: 10px">
      <el-row>
        <el-col class="spn buttons">
          <el-button plain @click="eaditMedicalTepl('add')">+ 增加模板</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 92) + 'px'">
      <el-table
        :data="tableData"
        border
        :row-class-name="tableColor"
        :height="innerHeight"
      >
        <el-table-column
          prop="secondType"
          label="模板类型"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="descr"
          label="描述"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="createdName"
          label="创建人"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="createdTime"
          label="创建时间"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="status"
          label="状态"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="address"
          label="操作"
        >
          <template slot-scope="{ row }">
            <el-button type="text" plain @click="eaditMedicalTepl('eadit',row.id)">修改</el-button>
            <el-button type="text" @click="deteleMedicalTemplate(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>
    <EaditMedicalTepl ref="medicalTepl" @success="getMedicalTemplateList()" />
  </div>
</template>
<script>
import EaditMedicalTepl from "./eaditMedicalTepl.vue";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    EaditMedicalTepl,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      tableData: [],
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 1,
      loading: false,
    };
  },
  mounted() {
    this.getMedicalTemplateList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    async deteleMedicalTemplate(id) {
      const confirmResult = await this.$confirm('请确认是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err);
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除');
      } else {
        this.loading = true;
        this.$api['medical/medicaltepl/deleteMedicalTemplate']({ id }).then((res) => {
          if (res.code !== 200) return this.$message.info('删除病历模板失败');
          this.loading = false;
          this.getMedicalTemplateList();
        });
      }
    },
    async getMedicalTemplateList() { // 获取病历列表模板分页
      this.loading = true;
      const res = await this.$api['medical/medicaltepl/medicalTemplateList']({ query: {
        type: '病例模板',
      }});
      if (res.code !== 200) return;
      this.tableData = res.data.result;
      this.total = res.data.total;
      this.loading = false;
    },
    eaditMedicalTepl(val, id) { // 写病历
      this.$refs.medicalTepl.eaditMedicalTepl(val, id);
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getMedicalTemplateList();
    },
  },
};
</script>
<style lang="scss" scoped>
.el-col{
  text-align: right;
  margin: 15px 0 0;
}
</style>
